<template>
  <sui-segment stacked="tall">
    <sui-form>
      <sui-form-field>
        <h4 style="margin-bottom:15px;font-weight:300">标题</h4>
        <sui-input placeholder="Title..." v-model="currentRecord.reportTitle" disabled focus/>
      </sui-form-field>
      <sui-divider />
      <sui-grid :columns="2" divided>
        <sui-grid-row>
          <sui-grid-column :width="12">
            <h4 style="margin-bottom:15px;font-weight:300">内容</h4>
            <div v-html="compiledMarkdown"></div>
          </sui-grid-column>
          <sui-grid-column :width="4">
            <sui-list>
              <sui-list-item>
                <sui-form-field>
                  <h4 style="margin-bottom:15px;font-weight:300">类型</h4>
                  {{currentRecord.type | type}}
                </sui-form-field>
              </sui-list-item>
              <sui-form-field>
                <h4 style="margin-bottom:15px;margin-top:15px;font-weight:300 ">所有者</h4>
                <sui-input placeholder="Owner... " icon="user " v-model="currentRecord.reporter" disabled/>
              </sui-form-field>
              <sui-form-field>
                <h4 style="margin-bottom:15px;margin-top:15px;font-weight:300 ">生成时间</h4>
                <Calendar></Calendar>
              </sui-form-field>
            </sui-list>
          </sui-grid-column>
        </sui-grid-row>
      </sui-grid>
      <sui-divider />
    </sui-form>
  </sui-segment>
</template>
<script>
import $ from "jquery";
import marked from "marked";
import Calendar from "components/Calendar.vue";
import {
  baseURL,
  get,
  save,
  associate,
  getAndAssociate,
  remove,
  update,
  axios
} from "service/api";
export default {
  components: {
    Calendar
  },
  filters: {
    type: function(value) {
      switch (value) {
        case 1:
          return "需求问题";
          break;
        case 2:
          return "界面问题";
          break;
        case 3:
          return "核心问题";
          break;
        case 4:
          return "问题解决成功";
          break;
        case 5:
          return "其他问题";
          break;
      }
    }
  },
  data() {
    return {
      currentRecord: {},
      article: {
        content: ""
      }
    };
  },
  computed: {
    compiledMarkdown: function() {
      return marked(this.article.content, { sanitize: true });
    }
  },
  mounted() {
    let self = this;
    let result;
    if (this.$route.query.entry != null) {
      this.currentRecord = this.$route.query.entry;
      get(`articles/${this.currentRecord.articleId}`).then(response => {
        if (response.status == "200") {
          this.article = response.data;
        }
      });
    } else {
      this.article.content = "没有内容";
    }
  },
  methods: {}
};
</script>
<style lang="scss">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.content:not(.custom) {
  max-width: none;
}
</style>